import {useState,useEffect,useRef} from 'react'
import Test from './components/test.js'
import {useWinSize,useReverse,useScrollTop} from './utils/tools'
function App() {
  // 创建一个state  num默认值是5 同时定义设置num的方法
  const [num,setNum]  = useState(5);
  const [count,setCount] = useState(100)
  // useEffect(()=>{
  //   // 模拟生命周期的componentDidMount
  //   console.log("模拟所有挂载与更新")
  // })
  // useEffect(()=>{
  //   // 模拟生命周期的componentDidMount
  //   console.log("回调函数模拟cdm")
  // },[])
  // useEffect(()=>{
  //   // 模拟生命周期的componentDidUpdate
  //   console.log("回调函数模拟num的更新")
  // },[num,count])
  const inpRef  = useRef();
  const size = useWinSize();
  // 通过函数执行返回一个dom引用
  // 这个dom引用可以单击被翻转的
  var el = useReverse(); 
  var el2 =  useReverse(); 
  var [el3,top] =useScrollTop();
  console.log(el);
  return ( <div>
    {/* 关联到真实的dom */}
    <h1 ref={el}>自定义构造函数</h1>
    <p>{JSON.stringify(size)}</p>
    <h1>Hooks</h1>
    <p ref={el2}>函数组件拥有模拟生命周期，模拟state，模拟ref的能力</p>
    <button onClick={()=>setNum(num+1)}>{num}</button>
    <button onClick={()=>setCount(count+5)}>{count}</button>
    {num<10?<Test></Test>:""}
    <div>
      <input ref={inpRef}/> 
      <button onClick={()=>alert(inpRef.current.value)}>获取值</button>
    </div>
    <p>top:{top}</p>
    <div style={{height:100,overflow:"auto"}} ref={el3}>
      100
      <div style={{height:500}}>500</div>
    </div>
  </div> );
}

export default App;